<template>
  <view class="content">
    <!-- 全选区域 -->
    <label class="content-radio" @tap="changeFullChecked">
      <radio :checked="isFullChecked" color="#C00000"/><text>全选</text>
    </label>
    <!-- 合计区域 -->
    <view class="content-amount">
      合计：<text class="price">￥{{totalCheckedPrice}}</text>
    </view>
    <!-- 结算按钮-->
   <view class="content-button" @tap="settlement">结算({{checkedCount}})</view>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapMutations,
    mapState 
  } from 'vuex'
  import {
    TOAST_SHOW_FAIL
  } from '@/utils/view_utils.js'
  export default {
    name:"my-settle",
    data() {
      return {
        
      };
    },
    computed: {
      ...mapState('m_user',['token']),
      ...mapGetters('m_cart',['checkedCount','total','totalCheckedPrice']),
      ...mapGetters('m_user',['addStr']),
      // 是否全选
      isFullChecked() {
        if(this.checkedCount === this.total) return true;
        return false;
      }
    },
    methods: {
      ...mapMutations('m_cart',['changeAllGoodsState']),
      changeFullChecked() {
        this.changeAllGoodsState(!this.isFullChecked)
      },
      settlement(){
        if(!this.checkedCount) return TOAST_SHOW_FAIL('请选择商品')
        if(!this.addStr) return TOAST_SHOW_FAIL('请选择地址')
        if(!this.token) return TOAST_SHOW_FAIL('请登录')
      }
    }
  }
</script>

<style lang="scss">
  .content {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #FFFFFF;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    font-size: 14px;
    &-amount {
      .price {
        color: #C00000;
      }
    }
    &-button {
      height: 50px;
      width: 100px;
      background-color: #C00000;
      color: #FFFFFF;
      line-height: 50px;
      text-align: center;
      padding: 0 10px;
    }
  }
</style>
